<template>
	<div class="header">
		<div class="header-left">
			<div class="header-left__logo">
				<img src="@/assets/logo.png" alt="">
			</div>
			<div class="header-left__title">后台管理</div>
			<i class="el-icon-s-fold icon" @click="collapse"></i>
		</div>
		<div class="header-right">
			<el-menu :default-active="user.navBar.active" class="el-menu-demo" mode="horizontal" @select="handleSelect"
				background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
				<el-menu-item :index="index+''" v-for="(item,index) in user.navBar.list" :key="index">{{item.name}}</el-menu-item>
				<el-submenu index="2">
					<template slot="title">{{user.username}}</template>
					<el-menu-item index="100">设置</el-menu-item>
					<el-menu-item index="101">退出</el-menu-item>
				</el-submenu>
			</el-menu>
		</div>
	</div>
</template>

<script>
	import {
		mapState,mapMutations
	} from 'vuex'
	export default {
		name: 'Header',
		data() {
			return {

				isCollapseq: false
			}
		},
		methods: {
			...mapMutations(['getslideMenus']),
			logout() {
				console.log('11');
			},
			collapse() {
				this.isCollapseq = !this.isCollapseq
				this.$bus.$emit('collapseaside', this.isCollapseq)
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
				if(this.user.navBar){
					this.user.navBar.active = key
					let item = this.user.navBar.list[this.user.navBar.active]
					if(item){
						this.getslideMenus(item.leftMenus)
						this.$router.push({
							name:item.leftMenus[0].name
						})
						if(key=='0'){
							this.$router.push({
								name:'welcome'
							})
						}
					}
				}
				if(key=='101'){
					this.$router.push({
						name:'Login'
					})
					window.sessionStorage.removeItem('rightlist')
					window.sessionStorage.removeItem('token')
					window.localStorage.removeItem('navactive')
				}
				/* 第一种和第二种方法是写在这里 */
				/* window.localStorage.setItem('navactive',JSON.stringify(key)) */
			}
		},
		mounted() {
			/* 第一种方法 */
			/* let r = JSON.parse(window.localStorage.getItem('navactive'))||'0'
			this.user.navBar.active = r */
			/* 这个必须要放到下面来 */
			/* let item = this.user.navBar.list[this.user.navBar.active]
			this.getslideMenus(item.leftMenus) */
			
			
			/* 第二种方法 */
			/* let r = JSON.parse(window.localStorage.getItem('navactive'))
			if(r){
				this.user.navBar.active = r
			}else {
				this.user.navBar.active = '0'
			} */
			/* 这个必须要放到下面来 */
			/* let item = this.user.navBar.list[this.user.navBar.active]
			this.getslideMenus(item.leftMenus) */
			
			/* 第三种方法 */
			let r = JSON.parse(window.localStorage.getItem('navactive'))||'0'
			if(this.user.navBar){
				this.user.navBar.active = r
			}
			
			
			/* 这个必须要放到下面来 */
			if(this.user.navBar){
				let item = this.user.navBar.list[this.user.navBar.active]
				this.getslideMenus(item.leftMenus)
			}
		},
		watch:{
			$route(to,from){
				if(this.user.navBar){
					window.localStorage.setItem('navactive',JSON.stringify(this.user.navBar.active))
				}
				if(to.path=="/welcome"){
					window.localStorage.setItem('navactive','0')
					let item = this.user.navBar.list[0]
					if(this.user.navBar){
						this.user.navBar.active = '0'
					}
					this.getslideMenus(item.leftMenus)
				}
			}
		},
		computed: {
			...mapState(['user'])
		}

	}
</script>

<style lang="less" scoped>
	.header {
		width: 100%;
		height: 100%;
		background-color: #333;
		display: flex;
		justify-content: space-between;
		box-shadow: 0 2px 5px #333;

		&-left {
			height: 100%;
			display: flex;
			align-items: center;

			.icon {
				color: #fff;
				margin-left: 30px;
			}

			&__logo {
				width: 80px;
				height: 100%;
				padding: 5px;

				&>img {
					width: 100%;
					height: 100%;
				}
			}

			&__title {
				font-size: 20px;
				color: #fff;
				text-shadow: 10px 10px rgba(25, 255, 255, .3);
			}
		}

		&-right {
			display: flex;
			align-items: center;

			&__info {
				&-name {
					color: #F0FFFF;
					font-size: 16px;
					margin-right: 15px;
				}
			}
		}
	}
</style>
